<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" style="text-align: center;">
        <span>选择题目</span>
        <div class="answer-number">
          <el-button class="number-btn" circle v-for="(value, index) in subjectIds" :key="index" @click="toSubject(index, value.type)" >&nbsp;{{index + 1}}&nbsp;</el-button>
        </div>
      </el-col>
      <el-col :span="16"  class="subject-box-card">
          <el-form ref="dataAnswerForm" v-if="tempAnswer" :model="tempAnswer" :label-position="labelPosition" label-width="100px">
            <div class="user-info">
              <el-row>
                <el-col :span="6">
                  <el-form-item label="考生姓名：">
                    <span></span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="得分：">
                    <span>{{ tempAnswer.score }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="耗时：">
                    <span>{{ tempAnswer.duration }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="状态：">
                    <span>{{ tempAnswer.markStatus }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <el-divider></el-divider>
            <div class="subject-content">
              <!-- 选择题 -->
              <div class="subject-content-option">
                <div class="subject-title">
                  <span class="subject-title-number">{{ subjectIndex }} .</span>
                  {{ tempAnswer.subject.subjectName }}({{tempAnswer.subject.score}})分
                </div>
                <div v-if="tempAnswer.subject.type === 0 || tempAnswer.subject.type === 2 || tempAnswer.subject.type === 3">
                  <ul class="subject-options" v-for="option in tempAnswer.subject.options" :key="option.id">
                    <li class="subject-option" :class="getClass(option.right)">
                      <label><span class="subject-option-prefix">{{ option.optionName }}&nbsp;</span><span v-html="option.optionContent" class="subject-option-prefix"></span></label>
                    </li>
                  </ul>
                </div>
                <!-- 简答题 -->
                <div v-if="tempAnswer.type === 1">
                  <p>
                    <span v-html="tempAnswer.answer"></span>
                  </p>
                </div>
              </div>
            </div>
            <el-row>
              <el-col :span="24">
                <el-form-item label="考生答案：">
                  <span v-html="tempAnswer.answer"></span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="参考答案：">
                  <span v-html="tempAnswer.subject.answer.answer"></span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="解析：">
                  <span v-html="tempAnswer.subject.analysis"></span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="答题结果：">
                  <el-switch
                    style="display: block"
                    v-model="correct"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="正确"
                    inactive-text="错误">
                  </el-switch>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="得分：">
                  <el-input v-model="score"/>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="subject-buttons" v-if="tempAnswer.subject.id !== ''">
              <el-button plain @click="last" :loading="loadingLast">上一题</el-button>
              <el-button plain @click="next" :loading="loadingNext">下一题</el-button>
              <el-button type="success" icon="el-icon-check" @click="completeMarking">批改完成</el-button>
            </div>
          </el-form>
        </el-col>
    </el-row>

  </div>
</template>

<script>
import {  getExaminationRecordDetail,completeMarking } from "@/api/exam/examinationRecord";
import {  createExaminationSubject ,getExaminationSubjectList } from "@/api/exam/examination";
import { getAnswerByRecordId, markAnswer } from '@/api/exam/answer'
import { nextSubjectType, answerType } from '@/const/constant'
export default {
  name: "Mark",
  components: {
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 列表
      list: [],
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        subjectName: null,
      },
      Disabled:[],
      // 表单参数
      form: {},
      labelPosition: 'right',
      examRecordId: undefined,
      examinationId: undefined,
      subjectId: undefined,
      loadingLast: false,
      loadingNext: false,
      subjectIndex: 1,
      subjectIds: [],
      answer: '',
      tempAnswer: {
        subject: {
          score: '',
          answer: {
            answer: ''
          }
        }
      },
      correct: true,
      score:0
    };
  },
  watch: {
    // 根据名称筛选分类tempAnswer
    categoryName(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    const ids = this.$route.params.id.split('-')
    this.examinationId = ids[0]
    this.examRecordId = ids[1]
    this.handleMarking()
  },
  methods: {
    handleMarking () {
      getAnswerByRecordId(this.examRecordId, undefined, undefined).then(response => {
        if (response.data === null) {
         this.$modal.msgError("加载失败")
          return
        }
        this.tempAnswer = response.data
        const { id, score } = this.tempAnswer.subject
        this.subjectId = id
        this.score = score
        this.correct = this.tempAnswer.answerType === 0
        getExaminationSubjectList(this.examinationId).then(response => {
          const subjectData = response.data
          if (subjectData.length > 0) {
            for (let i = 0; i < subjectData.length; i++) {
              const { subjectId, type } = subjectData[i]
              this.subjectIds.push({ subjectId, type, index: i + 1 })
            }
          }
        })
      }).catch(() => {
        
      })
    },
    /** 查询考试详情 */
    getData() {
      this.loading = true;
      // 执行查询
      const query = {
        id :this.$route.params.id
      }
      getExaminationRecordDetail(query).then(response => {
        this.loading = false;
      });
    },
    /** 表单重置 */
    reset() {
      this.tempSubject = {
      },
      this.resetForm("form");
    },


    /** 添加题目按钮操作 */
    addSubject(row,index) {
      this.loading = true
      this.Disabled[index] = true
      if(row.id != null && row.id > 0){
        const addForm ={
          categoryId: row.categoryId,
          examinationId:this.$route.params.id,
          subjectId:row.id,
          type: row.choicesType
        }
        createExaminationSubject(addForm).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.loading = false
        this.getList();
        this.getSubjectList();
      });
        
      }else{
        this.$modal.msgError("该试题不存在")
        this.loading = false
      }
      
    },

    // 上一题
    last () {
      for (let i = 0; i < this.subjectIds.length; i++) {
        if (this.subjectIds[i].subjectId === this.subjectId) {
          if (i === 0) {
            this.$modal.msgError("已经是第一题了")
            break
          }
          let { subjectId, type, index } = this.subjectIds[i]
          //this.subjectIndex = index
          this.saveCurrentAnswerAndNext(subjectId, type, nextSubjectType.last)
          break
        }
      }
    },
    // 下一题
    next () {
      for (let i = 0; i < this.subjectIds.length; i++) {
        if (this.subjectIds[i].subjectId === this.subjectId) {
          if (i === this.subjectIds.length - 1) {
            this.$modal.msgError("已经是最后一题了")
            
            break
          }
          let { subjectId, type, index } = this.subjectIds[i]
          //this.subjectIndex = index
          this.saveCurrentAnswerAndNext(subjectId, type, nextSubjectType.next)
          break
        }
      }
    },

     // 跳到指定的题目
    toSubject (index, subjectType) {
      console.log(index)
      let subjectId
      if(index > 0){
        subjectId = this.subjectIds[index - 1].subjectId
      }else{
        subjectId = ''
      }
      
      //this.subjectIndex = index + 1
      this.saveCurrentAnswerAndNext(subjectId, subjectType, nextSubjectType.next)
    },
    // 更新题目索引
    updateSubjectIndex () {
      console.log(this.subjectId)
      this.subjectIndex = this.getSubjectIndex(this.subjectId)
    },
    // 获取题目索引
    getSubjectIndex (targetId) {
      for (let subject of this.subjectIds) {
        let { subjectId, index } = subject
        if (subjectId === targetId) {
          return index
        }
      }
      return 1
    },
    getClass (right) {
      return answerType[right]
    },
    saveCurrentAnswerAndNext (subjectId, subjectType, nextType) {
      // 更新分数、批改状态
      const answer = {
        id: this.tempAnswer.id,
        score: this.score,
        markStatus: 1,
        answerType: this.correct ? 0 : 1
      }
      markAnswer(answer).then(() => {
        if (subjectId !== undefined) {
          this.getAnswer(subjectId, subjectType, nextType)
        }
      })
    },
    getAnswer (nextSubjectId, subjectType, nextType) {
      this.startLoading(nextType)
      getAnswerByRecordId(this.examRecordId, nextSubjectId, subjectType, nextType).then(response => {
        if (response.data === null) {

          this.$modal.msgError("加载题目失败")
        } else {
          this.tempAnswer = response.data
          const { id, score } = this.tempAnswer.subject
          this.subjectId = id
          this.score = score
          this.correct = parseInt(this.tempAnswer.answerType) === 0
          this.updateSubjectIndex()
        }
        this.endLoading(nextType)
      }).catch(error => {
        console.log(error)
        this.$modal.msgError("加载答题失败")
        this.endLoading(nextType)
      })
    },
    startLoading (nextType) {
      if (nextType === nextSubjectType.next) {
        this.loadingNext = true
      } else if (nextType === nextSubjectType.last) {
        this.loadingLast = true
      } else {
        this.loadingNext = true
      }
    },
    endLoading (nextType) {
      if (nextType === nextSubjectType.next) {
        this.loadingNext = false
      } else if (nextType === nextSubjectType.last) {
        this.loadingLast = false
      } else {
        this.loadingNext = false
      }
    },
     // 完成批改
    completeMarking () {
      this.saveCurrentAnswerAndNext()
      completeMarking({ id: this.examRecordId }).then(response => {
        if (response.data) {
          this.$modal.msgSuccess("操作成功")
        }
      })
    },

    /** 导出按钮操作 */
    handleExport() {
      // 处理查询参数
      let params = {...this.queryParams};
      params.pageNo = undefined;
      params.pageSize = undefined;
      this.$modal.confirm('是否确认导出所有选择题数据项?').then(() => {
          this.exportLoading = true;
          return exportSubjectChoicesExcel(params);
        }).then(response => {
          this.$download.excel(response, '选择题.xls');
          this.exportLoading = false;
        }).catch(() => {});
    },

  }
};
</script>
<style lang="scss">
  .subject-title {
    color: #333333;
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
    .subject-title-number {
      position: absolute;
      left: -25px;
      top: 0;
      display: inline-block;
      width: 40px;
      line-height: 22px;
      text-align: right;
    }
  }
  .subject-option {
    padding-bottom: 10px;
    padding-left: 10px;
  }
  .score {
    margin: 20px;
  }
  .subject-content {
    padding: 12px 0 12px 22px;
    margin-bottom: 12px;
    position: relative;
    color: #666666;
    text-align: left;
  }
  .correct {
    color: #F56C6C;
  }
  .right {
    color: #67C23A;
  }
  .score-gray-box-title {
    text-align: center;
  }
  .subject-buttons {
    text-align: center;
  }
  .answer-number {
    padding: 12px;
    .number-btn {
      margin: 6px;
      width: 40px;
      height: 40px;
    }
  }
</style>
